<template>
  <CloudDialog
    v-model:visible="visible"
    title="响应内容"
    :width="800"
    :mask-closable="false">
    <CloudScrollbar class="content-area">
      {{ content }}
    </CloudScrollbar>
    <template #footer>
      <a-button @click="handleClose">关闭</a-button>
    </template>
  </CloudDialog>
</template>
<script lang="ts" setup>
const visible = defineModel<boolean>({ required: true })
const content = defineModel<string | undefined>('content')

const handleClose = () => {
  visible.value = false
}
</script>
<style lang="less" scoped>
.content-area {
  display: flex;
  height: 350px;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  background-color: var(--color-text-1);
  color: white;
  border-radius: 4px;
}
</style>
